@page "/textfield"
@inherits BasePage
@using MduiBlazor.Shared.Pages.Examples.Textfield

<PageTitle>文本框</PageTitle>
<div class="mdui-m-y-5">
    <MduiText Typo="@Typo.display1" TextColor="@Colors.Theme.Primary">文本框</MduiText>
    <p>文本框一般使用在表单中。MDUI 的文本框拥有字数统计、表单验证等功能。</p>
    <p class="mdui-typo">可以配合<a href="grid">网格布局系统</a>进行表单布局。</p>
</div>

<PageContent>
    <PageContentItem Title="示例" OnClick="@(_=>ScrollToElementById("examples"))">
        <PageContentItem Title="单行文本框" OnClick="@(_=>ScrollToElementById("simple"))" />
        <PageContentItem Title="固定标签文本框" OnClick="@(_=>ScrollToElementById("label"))" />
        <PageContentItem Title="浮动标签文本框" OnClick="@(_=>ScrollToElementById("floating"))" />
        <PageContentItem Title="禁用状态" OnClick="@(_=>ScrollToElementById("disabled"))" />
        <PageContentItem Title="多行文本框" OnClick="@(_=>ScrollToElementById("multiRows"))" />
        <PageContentItem Title="含帮助文本" OnClick="@(_=>ScrollToElementById("helperText"))" />
        <PageContentItem Title="字数统计" OnClick="@(_=>ScrollToElementById("count"))" />
        <PageContentItem Title="含图标" OnClick="@(_=>ScrollToElementById("icon"))" />
        <PageContentItem Title="可展开文本框" OnClick="@(_=>ScrollToElementById("expandable"))" />
    </PageContentItem>
    <PageContentItem Title="组件参数" OnClick="@(_=>ScrollToElementById("attr"))" />
</PageContent>

<MduiDivider Class="mdui-m-y-5" />

<div>
    <h2 id="examples">
        <MduiText Typo="@Typo.headline" TextColor="@Colors.Theme.Primary">示例</MduiText>
    </h2>

    <MduiText id="simple" Typo="@Typo.subheading"><b>单行文本框</b></MduiText>
    <ExampleSection Component="@typeof(SimpleTextfield)" />

    <MduiText id="label" Typo="@Typo.subheading"><b>固定标签文本框</b></MduiText>
    <ExampleSection Component="@typeof(LabelTextfield)" />

    <MduiText id="floating" Typo="@Typo.subheading"><b>浮动标签文本框</b></MduiText>
    <ExampleSection Component="@typeof(FloatTextfield)" />

    <MduiText id="disabled" Typo="@Typo.subheading"><b>禁用状态</b></MduiText>
    <p class="mdui-typo">设置参数<code>Disabled</code>为<code>true</code>，即可禁用文本框。</p>
    <ExampleSection Component="@typeof(DisabledTextfield)" />

    <MduiText id="multiRows" Typo="@Typo.subheading"><b>多行文本框</b></MduiText>
    <p class="mdui-typo">设置参数<code>Rows</code>大于等于<code>2</code>，即为多行文本框，该参数为文本框的高度。</p>
    <ExampleSection Component="@typeof(MultiRowsTextfield)" />

    <MduiText id="helperText" Typo="@Typo.subheading"><b>含帮助文本</b></MduiText>
    <p class="mdui-typo">设置参数<code>HelperText</code>，可以添加帮助文本。</p>
    <ExampleSection Component="@typeof(HelpTextfield)" />

    <MduiText id="count" Typo="@Typo.subheading"><b>字数统计</b></MduiText>
    <p class="mdui-typo">设置参数<code>MaxLength</code>大于<code>0</code>即可限制输入的字符长度，组件会自动添加实时字数统计显示到文本框右下角。</p>
    <ExampleSection Component="@typeof(MaxlengthTextfield)" />

    <MduiText id="icon" Typo="@Typo.subheading"><b>含图标</b></MduiText>
    <ExampleSection Component="@typeof(IconTextfield)" />

    <MduiText id="expandable" Typo="@Typo.subheading"><b>可展开文本框</b></MduiText>
    <ExampleSection Component="@typeof(ExpandableTextfield)" />
</div>

<MduiDivider Class="mdui-m-y-5" />

<div>
    <h2 id="attr">
        <MduiText Typo="@Typo.headline" TextColor="@Colors.Theme.Primary">组件参数</MduiText>
    </h2>

    <MduiTableContainer UseMduiTypo Class="mdui-m-y-1">
         <MduiSimpleTable>
             <thead>
                 <th>参数名称</th>
                 <th>类型/返回类型</th>
                 <th>说明</th>
             </thead>
             <tbody>
                 <tr>
                     <td>
                         <code>Name</code>
                     </td>
                     <td>
                         <code>string?</code>
                     </td>
                     <td><code>input</code>标签的<code>name</code>属性。</td>
                 </tr>
                 <tr>
                     <td>
                         <code>Value</code>
                     </td>
                     <td>
                         <code>string?</code>
                     </td>
                     <td><code>input</code>标签的值。</td>
                 </tr>
                 <tr>
                     <td>
                         <code>ValueChanged</code>
                     </td>
                     <td>
                         <code>EventCallback&lt;string&gt;</code>
                     </td>
                     <td><code>input</code>标签值修改后的回调函数，一般用于双向绑定。</td>
                 </tr>
                 <tr>
                     <td>
                         <code>ValueExpression</code>
                     </td>
                     <td>
                         <code>Expression&lt;Func&lt;string&gt;&gt;?</code>
                     </td>
                     <td>双向绑定下不用设置该参数。</td>
                 </tr>
                 <tr>
                     <td>
                         <code>Disabled</code>
                     </td>
                     <td>
                         <code>bool</code>
                     </td>
                     <td>是否禁用，默认<code>false</code>。</td>
                 </tr>
                 <tr>
                     <td>
                         <code>Label</code>
                     </td>
                     <td>
                         <code>string?</code>
                     </td>
                     <td>标签显示的文本。</td>
                 </tr>
                 <tr>
                     <td>
                         <code>LabelRequired</code>
                     </td>
                     <td>
                         <code>bool</code>
                     </td>
                     <td>是否显示必填<code>*</code>，默认<code>false</code>。</td>
                 </tr>
                 <tr>
                     <td>
                         <code>Icon</code>
                     </td>
                     <td>
                         <code>string?</code>
                     </td>
                     <td>要显示的Material图标类名。</td>
                 </tr>
                 <tr>
                     <td>
                         <code>IconContent</code>
                     </td>
                     <td>
                         <code>RenderFragment?</code>
                     </td>
                     <td>要显示的图片渲染片段，一般用于自定义图标。</td>
                 </tr>
                 <tr>
                     <td>
                         <code>ErrorText</code>
                     </td>
                     <td>
                         <code>string?</code>
                     </td>
                     <td>自定义的错误提示信息。</td>
                 </tr>
                 <tr>
                     <td>
                         <code>HelperText</code>
                     </td>
                     <td>
                         <code>string?</code>
                     </td>
                     <td>要显示的帮助提示信息。</td>
                 </tr>
                 <tr>
                     <td>
                         <code>FloatingLabel</code>
                     </td>
                     <td>
                         <code>bool</code>
                     </td>
                     <td>是否浮动标签，默认<code>false</code>。</td>
                 </tr>
                 <tr>
                     <td>
                         <code>AutoFocus</code>
                     </td>
                     <td>
                         <code>bool</code>
                     </td>
                     <td>是否自动获取焦点，默认<code>false</code>。</td>
                 </tr>
                 <tr>
                     <td>
                         <code>Required</code>
                     </td>
                     <td>
                         <code>bool</code>
                     </td>
                     <td>是否必填项，默认<code>false</code>。</td>
                 </tr>
                 <tr>
                     <td>
                         <code>Readonly</code>
                     </td>
                     <td>
                         <code>bool</code>
                     </td>
                     <td>是否只读，默认<code>false</code>。</td>
                 </tr>
                 <tr>
                     <td>
                         <code>Placeholder</code>
                     </td>
                     <td>
                         <code>string?</code>
                     </td>
                     <td>要显示的占位符。</td>
                 </tr>
                 <tr>
                     <td>
                         <code>MaxLength</code>
                     </td>
                     <td>
                         <code>int?</code>
                     </td>
                     <td>允许输入的最大长度。</td>
                 </tr>
                 <tr>
                     <td>
                         <code>Rows</code>
                     </td>
                     <td>
                         <code>int</code>
                     </td>
                     <td>文本框行数，默认<code>1</code>，当该参数大于1时，组件渲染为<code>textarea</code>。</td>
                 </tr>
                 <tr>
                     <td>
                         <code>Type</code>
                     </td>
                     <td>
                         <code>string?</code>
                     </td>
                     <td><code>input</code>标签的类型，默认<code>text</code>。</td>
                 </tr>
                 <tr>
                     <td>
                         <code>Pattern</code>
                     </td>
                     <td>
                         <code>string?</code>
                     </td>
                     <td><code>input</code>标签的输入校验。</td>
                 </tr>
                 <tr>
                     <td>
                         <code>Trim</code>
                     </td>
                     <td>
                         <code>bool</code>
                     </td>
                     <td>是否去掉标签值首末空格，默认<code>false</code>。</td>
                 </tr>
                 <tr>
                     <td>
                         <code>OnInput</code>
                     </td>
                     <td>
                         <code>EventCallback&lt;string&gt;</code>
                     </td>
                     <td>标签输入时的回调函数。</td>
                 </tr>
             </tbody>
         </MduiSimpleTable>
     </MduiTableContainer>
 </div>